<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" src="statics/jQuery3.6.0.js"></script>
</head>
<body>
<form>
    <p>
        用户名：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="text" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="login()">
    </p>
</form>

<div>
    <button onclick="hello()">访问/hello</button>
    <button onclick="hi()">访问/hi</button>
    <button onclick="list()">访问/list</button>
    <button onclick="deleteBook()">访问/delete</button>
</div>

<script>

    function request(url,type,fn) {
        $.ajax({
            url:url,
            beforeSend: function(request){
                request.setRequestHeader("token", token);
            },
            type: type,
            success: fn
        })
    }

    function login() {
        let username = $('#username').val();
        let password = $('#password').val();
        $.post('user/login',{'userName':username,'password':password},function (data) {
            console.log(data)
            token = data;
        })
    }

    function hello() {
        $.ajax({
            url:'hello',
            beforeSend: function(request){
                request.setRequestHeader("token", token);
            },
            type: 'GET',
            success: function (data) {
                console.log(data)
            }
        })
    }

    function hi() {
        request('test','GET',function (data) {
            console.log(data)
        })
    }

    function list() {
        request('list','GET',function (data) {
            console.log(data)
        })
    }

    function deleteBook() {
        request('delete','GET',function (data) {
            console.log(data)
        })
    }
</script>
</body>
</html>